import { Demo1Component } from './demo1/demo1.component';
import { TextareaComponent } from './textarea/textarea.component';
import { AutoSizeComponent } from './auto-size/auto-size.component';
import { InputGroupComponent } from './input-group/input-group.component';
import { ClearableComponent } from './clearable/clearable.component';
import { InputNumberComponent } from './input-number/input-number.component';
import { Demo6Component } from './demo6/demo6.component';

export const InputConfig = {
  location: 'Input',
  description: '用于界面字符串输入，是最基础的表单域。',
  description_en: 'Input is used in interface string input which is the most basic form field.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/input/demo1/demo1.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic',
      demoDescription: '单行表单域的基础使用。',
      demoDescription_en: 'Basic use of single-line form fields.',
    },
    {
      demo: Demo6Component,
      codePath: 'showcase/input/demo6/demo6.component',
      demoTitle: '尺寸大小',
      demoTitle_en: 'Size',
      demoDescription:
        '输入框提供两种尺寸，大尺寸的输入框高度为 40px，主要适用于表单、配置等场景；小尺寸的输入框高度为 32px，主要适用于表格等组件内的嵌套输入场景。',
      demoDescription_en:
        'Input boxes are available in two sizes. The height of a large input box is 40 pixels, which is mainly applicable to scenarios such as forms and configuration. The height of the small input box is 32 px, which is mainly applicable to nested input scenarios in components such as tables.',
    },
    {
      demo: TextareaComponent,
      codePath: 'showcase/input/textarea/textarea.component',
      demoTitle: '文本域',
      demoTitle_en: 'Text field',
      demoDescription: `用于多行输入。可通过拉动右下角来调节高度的多行文本输入框，默认只能调整高度，可通过设置 resize:both 样式属性设置为同时调整宽度和高度。`,
      demoDescription_en: `For multi-line input. The height of the multi-line text input box can be adjusted by pulling the lower right corner. By default, only the height can be adjusted. It can be set to adjust the width and height at the same time by setting the resize:both style attribute.`,
    },
    {
      demo: AutoSizeComponent,
      codePath: 'showcase/input/auto-size/auto-size.component',
      demoTitle: '文本域自适应高度',
      demoTitle_en: 'Auto height of text field',
      demoDescription: `lvAutosize 属性适用于 textarea 节点，并且只有高度会自动变化。另外 lvAutosize 可以设定为一个对象，指定最小行数和最大行数。`,
      demoDescription_en: `Property lvAutosize applies to node textarea, and only the height changes automatically. In addition, lvAutosize can be set as an object to specify the minimum number of rows and the maximum number of rows.`,
    },
    {
      demo: InputGroupComponent,
      codePath: 'showcase/input/input-group/input-group.component',
      demoTitle: '输入组合',
      demoTitle_en: 'Input combination',
      demoDescription: '为表单域添加前后缀，增强表单域的表意提升易用性。可配置内置前后缀和外置前后缀。',
      demoDescription_en:
        'Add prefix and suffix to the form field to enhance the expressiveness and ease of use of the form field. The built-in prefix and external prefix can be configured.',
    },
    {
      demo: ClearableComponent,
      codePath: 'showcase/input/clearable/clearable.component',
      demoTitle: '一键清除',
      demoTitle_en: 'One click clear',
      demoDescription: '点击清除图标一键清空当前输入。',
      demoDescription_en: 'Click the clear icon to clear the current input with one click.',
    },
    {
      demo: InputNumberComponent,
      codePath: 'showcase/input/input-number/input-number.component',
      demoTitle: '数字输入框',
      demoTitle_en: 'Input number',
      demoDescription: '数字输入框。',
      demoDescription_en: 'Input number',
      devDebug: true,
    },
  ],
  useRule: [],
  useSuggestion: [],
  mApi: [
    {
      selector: 'lv-input',
      snippet: `<input lv-input name="\${1:basic}" placeholder=\${2:"Enter ..."} />`,
      name: 'lv-input',
      name_en: 'lv-input',
      api: [
        {
          attribute: 'lvSize',
          type: 'default | large',
          default: 'default',
          description: '输入框大小。外层元素为lv-input-group且设置了lvSize时，当前属性不生效。',
          description_en:
            'Input size. If the outer element is lv-input-group and lvSize is set, the current attribute does not take effect.',
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '是否禁用。当和formControlName一起时，可通过lvDisabled或formControlName控制灰化(同一个formItem只能选择一种，参考form的基础demo)。',
          description_en: 'Whether to disable.When used with formControlName, graying can be controlled by lvDisabled or formControl. (Only one type can be selected for the same formItem. For details, see the basic demo of the form.)',
        },
        {
          attribute: 'lvPasteAllowed',
          type: 'boolean',
          default: 'true',
          description: '是否允许在文本域中使用粘贴输入。',
          description_en: 'Whether paste input is allowed in text field.',
        },
        {
          attribute: 'lvAutosize',
          type: 'boolean|{maxRows: number, minRows: number}',
          default: 'false',
          description: '设置最小rows，最大rows。该属性只对多行文本生效。',
          description_en: 'Set the minimum rows and the maximum rows. This property only takes effect in multi-line text.',
        },
        {
          attribute: 'lvMaxLength',
          type: 'number | { length: number; limitInput?: boolean; }',
          default: 'null',
          description: '仅作用于textarea。可输入的最大长度。limitInput:超过最大长度, 是否显示用户输入，默认显示用户输入，超过最大值后错误提示。',
          description_en:
            'Applies only to textarea. The maximum length that can be entered. LimitInput: Exceeded the maximum length, do you want to display user input. User input is displayed by default. If the value exceeds the maximum, an error message is displayed.',
        },
      ],
      event: [],
    },
    {
      selector: 'lv-input-group',
      snippet: `
        <lv-input-group [lvPrefix]="\${1:'http://'}" [lvAddAfter]="\${2:addAfterTpl}">
          <input lv-input />
        </lv-input-group>
      `,
      name: 'lv-input-group',
      name_en: 'lv-input-group',
      api: [
        {
          attribute: 'lvSize',
          type: 'default | large',
          default: 'default',
          description: '输入框大小。',
          description_en: 'Input size.',
        },
        {
          attribute: 'lvPrefix',
          type: 'string | TemplateRef',
          default: 'null',
          description: '文本框添加内置前缀。',
          description_en: 'Add built-in prefix to the input.',
        },
        {
          attribute: 'lvSuffix',
          type: 'string | TemplateRef',
          default: 'null',
          description: '文本框添加内置后缀。',
          description_en: 'Add built-in suffix to the input.',
        },
        {
          attribute: 'lvAddBefore',
          type: 'string | TemplateRef',
          default: 'null',
          description: '文本框添加外置前缀。',
          description_en: 'Add external prefix to the input',
        },
        {
          attribute: 'lvAddAfter',
          type: 'string | TemplateRef',
          default: 'null',
          description: '文本框添加外置后缀。',
          description_en: 'Add external suffix to the input',
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '是否禁用组内的输入框。',
          description_en: 'Whether to disable input under the group.',
        },
      ],
      event: [],
    },
  ],
};
